<template>
  <main
    :style="{
      background: `var(${colorVar.HeaderBackGroundColor})`,
      color: `var(${colorVar.HeaderBackTextColor})`,
    }"
    class="screen_Box flex flex-direction-column transition_1"
  >
    <div class="screen_Box_center" id="font"></div>
    <section class="screen_Box_footer ml-20 mb-20 flex flex-direction-column">
      <div
        :style="{
          color: `var(${colorVar.HeaderBackTextColor})`,
        }"
        class="mb-n1 text"
      ></div>
    </section>
  </main>
</template>

<script setup>
import * as THREE from "three";
import ThreeBase from "../assets/ThreeBase";
import { TessellateModifier } from "three/examples/jsm/modifiers/TessellateModifier.js";
import { defineProps, nextTick, onMounted, ref } from "vue";
import Typed from "typed.js";
const str = ref("");
const props = defineProps({
  colorVar: {
    type: Object,
    // eslint-disable-next-line vue/require-valid-default-prop
    default: {
      HeaderBackGroundColor: "--cyan-200",
      HeaderBackTextColor: "--violet-600",
    },
  },
  allDataList: {
    type: Object,
  },
});
class MyFont extends ThreeBase {
  constructor() {
    super();
  }
  animateAction() {
    if (this.mesh) {
      //让偏移值随时间递减到0，汇聚成原来的字体，时间值递减
      if (this.time >= 0) {
        this.time += 0.005;
        this.mesh.material.uniforms.time.value = 2.0 - this.time;
        if (this.time >= 2.0) {
          this.time = -1;
        }
      } else {
        this.mesh.material.uniforms.time.value = 0.0;
      }
    }
  }
  createChart(that) {
    if (this.mesh) {
      this.cleanObj(this.mesh);
      this.mesh = null;
    }
    this.that = that;
    if (!this.loader) {
      this.loader = new THREE.FontLoader();
    }
    this.loader.load("Informal Roman_Regular.json", (font) => {
      //创建字体图形
      let geometry = new THREE.TextGeometry(that.text, {
        font: font,
        size: that.fontSize, //字体大小
        height: that.thickness, //字体厚度
        curveSegments: 3,
        bevelThickness: 2,
        bevelSize: 1,
        bevelEnabled: true,
      });
      //图形居中
      geometry.center();
      //细化修改器
      const tessellateModifier = new TessellateModifier(10, 6);
      //修改图形的面数
      geometry = tessellateModifier.modify(geometry);

      //转为缓存图形，方便获取点面等数据
      geometry = new THREE.BufferGeometry().fromGeometry(geometry);
      //三角形面数
      const numFaces = geometry.attributes.position.count / 3;
      //需要赋值的点颜色数组
      const colors = new Float32Array(numFaces * 3 * 3);
      //需要赋值的偏移变量数组
      const displacement = new Float32Array(numFaces * 3 * 3);

      const color = new THREE.Color();

      for (let f = 0; f < numFaces; f++) {
        const index = 9 * f;
        //随机颜色
        color.setRGB(
          Math.random() * 0.5 + 0.5,
          Math.random() * 0.5 + 0.5,
          Math.random() * 0.5 + 0.5
        );
        //随机偏移值
        const d = that.minDistance + that.distance * Math.random();

        for (let i = 0; i < 3; i++) {
          //给3个点赋值同样的颜色，形成一个颜色的三角形
          colors[index + 3 * i] = color.r;
          colors[index + 3 * i + 1] = color.g;
          colors[index + 3 * i + 2] = color.b;
          //给3个点赋值偏移值，形成对应的三角形
          displacement[index + 3 * i] = d;
          displacement[index + 3 * i + 1] =
            d + Math.random() * that.minDistance;
          displacement[index + 3 * i + 2] =
            d + Math.random() * that.minDistance;
        }
      }
      //设置顶点着色器值
      geometry.setAttribute("aColor", new THREE.BufferAttribute(colors, 3));
      geometry.setAttribute(
        "displacement",
        new THREE.BufferAttribute(displacement, 2)
      );
      //着色器材质
      console.log(typeof document.getElementById("vertexshader").textContent);
      const shaderMaterial = new THREE.ShaderMaterial({
        uniforms: {
          time: { value: 0.0 },
        },
        vertexShader: document.getElementById("vertexshader").textContent,
        fragmentShader: document.getElementById("fragmentshader").textContent,
      });

      let mesh = new THREE.Mesh(geometry, shaderMaterial);

      this.mesh = mesh;
      this.scene.add(mesh);
      this.time = 0;
    });
  }
}
var myFont = {};
onMounted(() => {
  myFont = new MyFont();
  myFont.initThree(document.getElementById("font"));
  myFont.createChart({
    text: "APIGE", //文本
    fontSize: 25, //字体大小
    thickness: 1, //厚度
    distance: 50, //偏移距离
    minDistance: 5, //最小偏移距离
  });
  let promise = null;
  setTimeout(() => {
    promise = new Promise((resolve) => {
      str.value =
        props.allDataList &&
        props.allDataList.message.filter((item) => {
          return item.sub_topic === "口号";
        });
      resolve(str.value && str.value[0]);
    });
  }, 1000);
  setTimeout(() => {
    nextTick(async () => {
      if (str.value?.length > 0) {
        const text = await promise;
        console.log(text);
        new Typed(".text", {
          strings: ["啊皮量化.", text.content],
          typeSpeed: 300,
          backSpeed: 500,
          backDelay: 100,
          fadeOut: true,
          loop: true,
          cursorChar: "_",
        });
      }
    });
  }, 1000);
});
</script>

<style scoped>
.screen_Box_footer {
  font-size: 20px;
}
.screen_Box_footer > div:nth-child(1) {
  line-height: 30px;
}
.screen_Box_footer > div:nth-child(2) {
  margin: 10px 0;
  font-size: 14px;
}
.screen_Box {
  height: calc(100vh - 60px);
  justify-content: end;
}
.screen_Box_center {
  /* top: 50%;
  left: 50%; */
  width: 800px;
  height: 400px;
  top: 50%;
  margin-left: -400px;
  left: 50%;
  margin-top: -200px;
  position: absolute;
}
.text {
  width: 300px;
  color: #333;
  position: relative;
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  font-size: var(--fontSize);
  line-height: 1;
}

.text::after {
  content: "";
  width: var(--cursorSize);
  height: var(--fontSize);
  background-color: black;
  z-index: 2;
  position: absolute;
  animation: blink 1s var(--duration) step-end infinite,
    moveCursor var(--duration) steps(var(--steps)) forwards;
}
</style>
